<template>
  <div class="container">
    <!-- 报告管理系统标题 -->
    <div class="main-content">
      <!-- 左侧树列表 -->
      <div class="rr">
        <div class="r">
          <div class="left-section">
            <!-- 左侧树形控件 -->
            <a-tree
              v-model:expandedKeys="expandedKeys"
              :selectedKeys="selectedLeftKeys"
              :tree-data="leftTreeData"
              @dblclick="handleLeftTreeDblClick"
            />
          </div>
          <div class="right-section">
            <a-card>
              <!-- 历史报告表格 -->
              <a-table
                :data-source="historyReports"
                :columns="columns"
                :pagination="false"
              >
                <template #actions="{ column, record }">
                  <template v-if="column.key === 'action'">
                    <a @click="downloadReport(record)">下载</a>
                  </template>
                </template>
              </a-table>
            </a-card>
          </div>
        </div>
      </div>
      <!-- 中部内容 -->
      <div class="middle-section">
        <a-card title="ESG关键绩效数据">
          <div v-for="(category, index) in categories" :key="index">
            <h3>{{ category.title }}</h3>
            <table class="data-table">
              <thead>
                <tr>
                  <th v-for="header in category.headers" :key="header">{{ header }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, rowIndex) in category.data" :key="rowIndex">
                  <td v-for="(item, itemIndex) in row" :key="itemIndex">{{ item }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <a-button type="primary" @click="uploadReport">上传报告</a-button>
        </a-card>
      </div>
    </div>
    <!-- 模态框展示模板内容 -->
    <a-modal v-model:open="open" title="模板" @ok="handleOk">
      <p>1、前言</p>
      <p>1.1、公司简介：介绍企业的使命、愿景和核心价值观</p>
      <p>1.2、报告概述：概述报告的目的、范围和编制方法。</p>
      <p>2、环境（Environmental）</p>
      <p>2.1、碳排放管理：详细说明企业在减少碳足迹方面的措施和成就。</p>
      <p>2.2、能源使用：介绍公司在提高能源效率和使用可再生能源方面的努力。</p>
      <p>2.3、资源管理：包括水资源管理、废弃物处理和材料使用等方面的策略和成果。</p>
      <p>3、社会（Social）</p>
      <p>3.1、员工福利：涵盖员工培训、职业发展、健康与安全等方面的政策和实践。</p>
      <p>3.2、社区参与：描述企业在支持社区发展、教育和公益项目方面的贡献。</p>
      <p>3.3、客户责任：包括数据隐私保护、客户服务和产品责任等内容。</p>
      <p>4、治理（Governance）</p>
      <p>4.1、公司治理结构：介绍董事会组成、独立性和治理政策。</p>
      <p>4.2、商业道德：详细说明反腐败措施、合规管理和道德规范。</p>
      <p>4.3、股东权益：描述企业如何保护和沟通股东权益。</p>
      <p>5、可持续发展目标</p>
      <p>5.1、长期目标：企业在环境、社会和治理方面的长期目标和愿景。</p>
      <p>5.2、进展报告：展示企业在实现这些目标方面的进展和未来计划。</p>
      <p>6、附录</p>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import type { ColumnsType } from "ant-design-vue/es/table";
import { ref } from "vue";

// 左侧树数据
const leftTreeData = [
  {
    title: "框架模板v.13",
    key: "0-0",
    children: [
      {
        title: "2023年度模版",
        key: "0-0-0",
        children: [{ title: "ABC公司 2023年度报告模版", key: "0-0-0-0" }],
      },
      {
        title: "2024年度模版",
        key: "0-0-1",
        children: [{ title: "XYZ公司 2024年度报告", key: "0-0-1-0" }],
      },
    ],
  },
];

// 历史报告数据
const historyReports = ref([
  { name: "2022年度报告", submitTime: "2022-01-15", status: "待审核" },
  { name: "2021年度报告", submitTime: "2021-06-20", status: "已通过" },
]);

// 表格列配置
const columns: ColumnsType<any> = [
  { title: "报告名称", dataIndex: "name", key: "name" },
  { title: "提交时间", dataIndex: "submitTime", key: "submitTime" },
  { title: "审核状态", dataIndex: "status", key: "status" },
  { title: "操作", key: "actions" },
];

// 用于存储选中的左侧树节点和展开的树节点
const selectedLeftKeys = ref<string[]>([]);
const expandedKeys = ref<string[]>([]);

// 模态框控制
const open = ref<boolean>(false);

// 数据分类及其内容
const categories = [
  {
    title: "环境（Environmental）数据",
    headers: [
      "集团/子公司/部门",
      "能源使用",
      "碳排放",
      "水资源管理",
      "废弃物管理",
      "资源使用",
    ],
    data: [
      ["集团总部", "3000 MWh", "15000 吨", "20000 吨", "500 吨", "2000 吨原材料使用"],
      [
        "子公司A",
        "1000 MWh",
        "5000 吨 CO2",
        "8000 吨用水",
        "200 吨废弃物",
        "800 吨原材料使用",
      ],
      [
        "部门B",
        "500 MWh",
        "2500 吨 CO2",
        "4000 吨用水",
        "100 吨废弃物",
        "400 吨原材料使用",
      ],
    ],
  },
  {
    title: "社会（Social）数据",
    headers: [
      "集团/子公司/部门",
      "员工福利",
      "多样性和包容性",
      "社区参与",
      "客户责任",
      "人权",
    ],
    data: [
      [
        "集团总部",
        "培训时间 5000 小时",
        "女性员工比例 45%",
        "投资金额 1000 万元",
        "客户满意度 90%",
        "供应链人权政策已实施",
      ],
      [
        "子公司A",
        "培训时间 2000 小时",
        "女性员工比例 40%",
        "投资金额 400 万元",
        "客户满意度 85%",
        "供应链人权政策已实施",
      ],
      [
        "部门B",
        "培训时间 1000 小时",
        "女性员工比例 35%",
        "投资金额 200 万元",
        "客户满意度 80%",
        "供应链人权政策已实施",
      ],
    ],
  },
  {
    title: "治理（Governance）数据",
    headers: [
      "集团/子公司/部门",
      "公司治理结构",
      "商业道德",
      "股东权益",
      "薪酬透明度",
      "审计与风险管理",
    ],
    data: [
      [
        "集团总部",
        "独立董事比例 40%",
        "反腐败措施已实施",
        "股东投票权已落实",
        "高管薪酬已披露",
        "审计框架已建立",
      ],
      [
        "子公司A",
        "独立董事比例 30%",
        "反腐败措施已实施",
        "股东投票权已落实",
        "高管薪酬已披露",
        "审计框架已建立",
      ],
      [
        "部门B",
        "独立董事比例 20%",
        "反腐败措施已实施",
        "股东投票权已落实",
        "高管薪酬已披露",
        "审计框架已建立",
      ],
    ],
  },
  {
    title: "ESG绩效数据对比",
    headers: ["类别", "数据项", "2022年", "2023年", "2024年"],
    data: [
      ["环境", "能源使用", "950 MWh", "1000 MWh", "1100 MWh"],
      ["环境", "碳排放", "4800 吨 CO2", "5000 吨 CO2", "5200 吨 CO2"],
      ["环境", "水资源管理", "7500 吨用水", "8000 吨用水", "8500 吨用水"],
      ["环境", "废弃物管理", "180 吨废弃物", "200 吨废弃物", "220 吨废弃物"],
      ["环境", "资源使用", "700 吨原材料", "800 吨原材料", "850 吨原材料"],
      ["社会", "员工福利", "1800 小时培训", "2000 小时培训", "2200 小时培训"],
      ["社会", "多样性和包容性", "35% 女性比例", "40% 女性比例", "42% 女性比例"],
      ["社会", "社区参与", "350 万元投资", "400 万元投资", "450 万元投资"],
      ["社会", "客户责任", "82% 满意度", "85% 满意度", "88% 满意度"],
      ["社会", "人权", "政策执行中", "政策执行中", "政策执行中"],
      ["治理", "公司治理结构", "30% 独立董事", "30% 独立董事", "35% 独立董事"],
      ["治理", "商业道德", "实施反腐措施", "实施反腐措施", "实施反腐措施"],
      ["治理", "股东权益", "投票权已落实", "投票权已落实", "投票权已落实"],
      ["治理", "薪酬透明度", "薪酬已披露", "薪酬已披露", "薪酬已披露"],
      ["治理", "审计与风险管理", "审计框架已建立", "审计框架已建立", "审计框架已建立"],
    ],
  },
];

// 处理左侧树节点双击事件
const handleLeftTreeDblClick = (node) => {
  console.log("selectedLeftKeys", selectedLeftKeys.value);
  // 显示模态框
  open.value = true;
};

// 下载报告的模拟处理函数
const downloadReport = (record) => {
  // 模拟下载报告
  alert(`下载报告: ${record.name}`);
};

// 上传报告的模拟处理函数
const uploadReport = () => {
  // 模拟上传报告
  alert("上传报告");
};

// 模态框确认处理函数
const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false; // 关闭模态框
};
</script>

<style scoped lang="less">
.container {
  /* 整体容器样式 */
}

.header {
  font-size: 20px;
  font-weight: bold;
}

.main-content {
  display: flex; /* 使用 flexbox 布局 */
  gap: 10px; /* 布局间距 */

  .rr {
    height: 90vh; /* 高度设置为视口的90% */
    width: 370px; /* 宽度设置为370px */

    .r {
      min-width: 350px; /* 最小宽度设置为350px */
      position: fixed; /* 固定位置 */
      max-width: 405px; /* 最大宽度设置为405px */
    }
  }
}

.left-section {
  max-width: 23vw; /* 左侧区域最大宽度 */

  :deep(.ant-tree-list) {
    min-height: 30vh; /* 最小高度 */
    max-width: 395px; /* 最大宽度 */
  }
}

.left-section,
.right-section {
  /* 统一样式 */
}

.right-section {
  margin-top: 10px; /* 上边距 */
  max-width: 23vw; /* 最大宽度 */

  :deep(.ant-card-body) {
    min-height: 60vh; /* 最小高度 */
    padding: 0; /* 内边距 */
  }
}

.middle-section {
  flex: 1; /* 使中间区域占用剩余空间 */
}

.data-table {
  width: 100%; /* 表格宽度 */
  border-collapse: collapse; /* 边框合并 */
  margin-bottom: 20px; /* 下边距 */
}

.data-table th,
.data-table td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文本左对齐 */
}

.data-table th {
  background-color: #f4f4f4; /* 表头背景色 */
}

.data-table h3 {
  margin: 0; /* 取消默认边距 */
  padding: 10px 0; /* 上下内边距 */
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
}
</style>
